<template>
  <div v-if="visible" class="gis-statistics">
    <div class="title" @click.stop>
      <strong>测量</strong>
      <div class="close-icon" @click="closeStatistics">
        <a-icon-font type="iconicon-beifen1" />
      </div>
    </div>
    <!-- 下期开发 -->
    <div v-if="myMode === 'distance'" class="content">
      <div class="btns">
        <a-icon-font
          class="icon"
          :class="myMode === 'distance' ? 'select' : ''"
          style="cursor: not-allowed;"
          type="iconjulibeifen"
        ></a-icon-font>
        <!-- @click="myMode = 'distance'" -->
        <a-icon-font
          class="icon"
          :class="myMode === 'area' ? 'select' : ''"
          type="iconjihebeifen"
          @click="myMode = 'area'"
        ></a-icon-font>
      </div>

      <div class="result">
        <div class="tips">
          <span>距离测算：点击开始，双击结束</span>
          <a-tooltip placement="top">
            <template slot="title">
              <span
                >鼠标点击选择地图上的点，会实时计算鼠标悬浮位置与上一个点之间的距离和所有点之间的总距离</span
              >
            </template>
            <a-icon-font class="icon" type="iconbangzhu"></a-icon-font>
          </a-tooltip>
        </div>

        <a-row class="my-row">
          <a-col :span="5"><span>单位：</span></a-col>
          <a-col :span="19">
            <a-select
              v-model="form.unit"
              style="width: 100%;"
              placeholder="请选择"
              size="small"
            >
              <a-select-option value="km">千米（km）</a-select-option>
              <a-select-option value="m">米（m）</a-select-option>
            </a-select>
          </a-col>
        </a-row>
        <a-row class="my-row">
          <a-col :span="5">长度：</a-col>
          <a-col :span="19"></a-col>
        </a-row>
        <a-row class="my-row">
          <a-col :span="5">总长：</a-col>
          <a-col :span="19"></a-col>
        </a-row>
      </div>
    </div>

    <div v-else class="content">
      <div class="btns">
        <a-icon-font
          class="icon"
          :class="myMode === 'distance' ? 'select' : ''"
          style="cursor: not-allowed;"
          type="iconjulibeifen"
        ></a-icon-font>
        <!-- @click="myMode = 'distance'" -->
        <a-icon-font
          class="icon"
          :class="myMode === 'area' ? 'select' : ''"
          type="iconjihebeifen"
          @click="myMode = 'area'"
        >
        </a-icon-font>
      </div>

      <div class="result">
        <div class="tips">
          <span>几何测算：计算要素长度，周长，面积</span>
          <a-tooltip placement="top">
            <template slot="title">
              <span
                >若当前图层为线图层可计算各要素长度,
                若为面图层,可计算各要素周长、面积，计算后并保存到各要素属性中。</span
              >
            </template>
            <a-icon-font class="icon" type="iconbangzhu"></a-icon-font>
          </a-tooltip>
        </div>

        <a-radio-group v-model="radio" class="radio" button-style="solid">
          <a-radio-button value="局部" disabled>局部</a-radio-button>
          <a-radio-button value="全局">全局</a-radio-button>
        </a-radio-group>

        <a-row class="my-row">
          <a-col :span="5">图层：</a-col>
          <a-col :span="19">{{
            selectLayer && selectLayer.name
              ? selectLayer.name
              : '-请先选择图层-'
          }}</a-col>
        </a-row>
        <div v-if="selectLayer && selectLayer.type !== 'circle'">
          <a-row class="my-row">
            <a-col :span="5">类型：</a-col>
            <a-col :span="19">
              <a-select
                v-model="form.method"
                style="width: 100%;"
                placeholder="请选择"
                size="small"
                @change="resetData"
              >
                <a-select-option
                  v-if="selectLayer && selectLayer.type === 'line'"
                  value="length"
                  >长度</a-select-option
                >
                <a-select-option
                  v-if="selectLayer && selectLayer.type === 'fill'"
                  value="perimeter"
                  >周长</a-select-option
                >
                <a-select-option
                  v-if="selectLayer && selectLayer.type === 'fill'"
                  value="area"
                  >面积</a-select-option
                >
              </a-select>
            </a-col>
          </a-row>
          <a-row class="my-row">
            <a-col :span="5"><span>单位：</span></a-col>
            <a-col :span="19">
              <a-select
                v-if="form.method === 'perimeter' || form.method === 'length'"
                v-model="form.unit"
                style="width: 100%;"
                placeholder="请选择"
                size="small"
              >
                <a-select-option value="km">千米（km）</a-select-option>
                <a-select-option value="m">米（m）</a-select-option>
              </a-select>
              <a-select
                v-else
                v-model="form.unit"
                style="width: 100%;"
                placeholder="请选择"
                size="small"
              >
                <a-select-option value="km2">平方千米（km²）</a-select-option>
                <a-select-option value="m2">平方米（m²）</a-select-option>
              </a-select>
            </a-col>
          </a-row>
          <a-row class="my-row">
            <a-col :span="5"><span>精度：</span></a-col>
            <a-col :span="19">
              <a-select
                v-model="form.precision"
                style="width: 100%;"
                placeholder="请选择"
                size="small"
              >
                <a-select-option
                  v-for="(item, index) in 21"
                  :key="`precision-${index}`"
                  :value="index"
                  >{{ index }}</a-select-option
                >
              </a-select>
            </a-col>
          </a-row>
          <a-row class="my-row">
            <a-col :span="9"
              ><span style="color: #e6505a;">*</span>字段名：</a-col
            >
            <a-col :span="15"
              ><a-input
                v-model="form.columnName"
                size="small"
                allow-clear
                placeholder="请输入字段名"
              ></a-input
            ></a-col>
          </a-row>
          <p><span style="color: #e6505a;">*</span>在数据表中保存为新字段</p>
        </div>
      </div>

      <div
        v-if="selectLayer && selectLayer.type !== 'circle'"
        class="bottom-btns"
      >
        <a-button size="small" @click="closeStatistics">取消</a-button>
        <a-button
          size="small"
          style="margin-left: 12px;"
          type="primary"
          :loading="loading"
          @click="saveParam"
          >保存字段</a-button
        >
      </div>
    </div>
  </div>
</template>

<script lang="ts">
/**
 * 搜索地图
 */
import { Component, Watch, Vue, Prop } from 'vue-property-decorator'
import GisStore from '@/store/modules/gis'
import Draggabilly from 'draggabilly'
import { calculateAll } from '@/api/gis'

@Component({
  components: {},
})
export default class GisMapping extends Vue {
  @Prop({ type: Boolean, default: false }) visible!: boolean
  public drag: any = null
  public myMode: any = 'area' // 测量方式
  public radio: any = '全局'
  public projectId: number | null = null
  public precision: any = 5
  public form: any = {}
  public loading: boolean = false

  public get mode() {
    return GisStore.mode
  }

  public get tabId() {
    return GisStore.currentTabId
  }

  public get selectLayer() {
    return GisStore.selectLayer
  }

  public get layerId() {
    return this.selectLayer ? this.selectLayer.id : null
  }

  @Watch('visible', { immediate: true })
  private watchSearchVisible(value: boolean) {
    const that = this
    if (value) {
      setTimeout(() => {
        const $overlay = document.querySelector(
          '.gis-map-component'
        ) as HTMLDivElement
        const $element = document.querySelector(
          '.gis-statistics'
        ) as HTMLDivElement
        that.drag = new Draggabilly($element, {
          containment: $overlay,
          grid: [1, 1],
        })
      }, 500)
    }
  }

  @Watch('mode', { immediate: true })
  public mdeChange() {
    if (this.mode !== null) {
      this.myMode = this.mode
    }
  }

  @Watch('selectLayer.id', { immediate: true })
  public layerChange() {
    this.form = {}
    this.$set(this.form, 'precision', 5)
  }

  @Watch('myMode', { immediate: true })
  public myModeChange() {
    GisStore.setMode(this.myMode)
  }

  public mounted() {
    this.projectId = Number(this.$route.params.id)
  }

  public async saveParam() {
    if (!this.selectLayer) {
      this.$message.error('请选择图层！')
      return
    }
    if (!this.form.method) {
      this.$message.error('请选择属性！')
      return
    }
    if (!this.form.unit) {
      this.$message.error('请选择单位！')
      return
    }
    if (!this.form.columnName) {
      this.$message.error('请填写生成字段名！')
      return
    }
    // const reg = /^[A-Za-z]+$/
    // if (!reg.test(this.form.columnName)) {
    //   this.$message.error('请检查生成字段名！(仅支持英文字母)')
    //   return
    // }
    const SPECIAL_CHARACTER_REPLACE =
      '[`~!@#$%^&*()+=|{}\':;\',[].<>/?~！@#￥%……&*（）——+|{}【】‘；：”“’。，、？"]'
    SPECIAL_CHARACTER_REPLACE.split('').forEach((char) => {
      // 去除特殊字符
      this.form.columnName = this.form.columnName.replaceAll(char, '')
    })
    if (this.form.columnName.length > 15) {
      this.$message.warning('字段名长度需小于15！')
      return
    }

    this.loading = true
    await calculateAll({
      data: {
        projectId: this.projectId,
        tabId: this.tabId,
        layerId: this.layerId,
        ...this.form,
      },
    })
      .then((response: any) => {
        this.loading = false
        const { code, result } = response.data
        if (code === 100) {
          // 存储需要更新数据的图层
          GisStore.updateCurrentLayerInfo({
            layer: result,
            time: new Date().getTime(),
          })
        } else {
          this.$message.error(response.data.message)
        }
      })
      .catch(() => {
        this.loading = false
      })
  }

  public resetData() {
    // let unit = undefined
    // switch (this.form.unit){
    //   case 'km':unit  =
    // }
    // this.$set(this.form, 'unit', undefined)
    delete this.form.unit
  }

  public closeStatistics() {
    this.form = {}
    GisStore.setCurrentToolBarAction(null)
  }
}
</script>

<style scoped lang="less">
.gis-statistics {
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.18);
  left: 135px;
  position: absolute;
  top: 1px;
  user-select: none;
  width: 268px;

  .title {
    align-items: center;
    border-bottom: 1px solid #e9e9e9;
    display: flex;
    height: 36px;
    justify-content: space-between;
    padding: 0 12px;

    .close-icon {
      align-items: center;
      border-radius: 2px;
      color: rgb(93, 99, 126);
      cursor: pointer;
      display: flex;
      font-size: 16px;
      padding: 4px;
      position: relative;
      user-select: none;
    }
  }

  .content {
    padding: 12px;

    .tips {
      align-items: center;
      display: flex;
      margin-bottom: 5px;
      position: relative;

      span {
        color: #222432;
        font-size: 12px;
        opacity: 0.5;
      }

      .icon {
        font-size: 18px;
        position: absolute;
        right: 0;
      }
    }

    .my-row {
      align-items: center;
      padding: 5px 0;

      span {
        line-height: 24px;
      }
    }

    .bottom-btns {
      margin-top: 12px;
      text-align: right;
    }

    .result {
      background-color: #fafafc;
      margin-top: 8px;
      padding: 12px;

      .radio {
        font-size: 12px;
        margin: 10px 0;
      }

      p {
        color: #222432;
        font-size: 12px;
        margin-bottom: 0;
        opacity: 0.5;
      }
    }

    .btns {
      padding-left: 2px;

      .icon {
        border: 1px solid #fff;
        cursor: pointer;
        font-size: 28px;
        margin-right: 15px;
      }

      .select {
        background: rgba(103, 113, 252, 0.1);
        border: 1px solid rgba(105, 115, 255, 0.6);
        border-radius: 2px;
      }
    }
  }
}
</style>
